
<script setup>
	
	import { ref } from 'vue';
	import port from './lib/port';
	import store from './lib/store';
	
	
	/** 词汇相关共享数据 */
	const storeData = store();
	
	/** 错误词汇列表 */
	const wrongWords = ref(uni.getStorageSync('wrongWords') || []);
	
	/** 正确词汇列表 */
	const rightWords = ref(uni.getStorageSync('rightWords') || []);


	/** 移除缓存 */
	const removeCcache = () => {
		uni.removeStorageSync('rightWords');
		uni.removeStorageSync('wrongWords');
	};
	
	/** 提交学习 */
	async function handleEnd(){
		await port.postFinish_api({ learnId: storeData.query.learnId });
		storeData.setCountdownStratTime('');
		uni.switchTab({
			url: '/pages/tabbar/home/index'
		});
		
		removeCcache();
	};
	
	/** 继续学习 */
	function handleStart() {
		storeData.resetQuery();
		storeData.setlist('correctlist', []);
		storeData.setlist('selectWordlist', []);
		storeData.setlist('afterStudylist', []);
		storeData.setlist('learningNewlist', []);
		uni.navigateBack();
		removeCcache();
	};
	
	
</script>

<template>
	<view class="containerbox">
		<uv-navbar :title="'学习结束'" placeholder :auto-back="false" left-icon="" />
		
		<view class="px-30 containerbox flex flex-col items-center justify-center">
			<image :src="`${$imageBaseUrl}course/ikon.png`" class="ikon" mode="widthFix" />
			<view class="text-26 mt-50 flex items-center justify-between">
				<view class="mr-20">正确<text class="mx-5 text-32 correct-color">{{ rightWords.length }}</text>个</view>
				<view class="">错误<text class="mx-5 text-32 mistake-color">{{ wrongWords.length }}</text>个</view>
			</view>
		</view>
		
		<view class="flex items-center justify-between bottombox">
			<view class="btn bgc-primary" @click="handleStart">继续学习</view>
			<view class="btn bgc-primary" @click="handleEnd">结束学习</view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	@import "./style/common.scss";
	.ikon{width: 80%}
	.flex-col{flex-direction: column}
	.containerbox{background-color: #fff}
</style>